<template>
    <div class="header">
        <div class="header-logo">
            <img
                src="@/assets/loginAdmin/logo_portal.png"
                style="height: 30px"
            />
        </div>
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            :ellipsis="false"
            @select="handleSelect"
            background-color="#00152a"
            text-color="#fff"
        >
            <el-sub-menu
                v-for="item in product"
                :key="item.href"
                :index="item.href"
            >
                <template #title>{{ item.menuName }}</template>
                <el-menu-item
                    v-for="child in item.child"
                    :key="child.href"
                    :index="child.href"
                    >{{ child.menuName }}</el-menu-item
                >
            </el-sub-menu>
            <el-menu-item
                v-for="item in menuList"
                :key="item.href"
                :index="item.href"
                >{{ item.menuName }}</el-menu-item
            >
            <!-- <el-menu-item index="1">Processing Center</el-menu-item>
            <el-sub-menu index="2">
                <template #title>Workspace</template>
                <el-menu-item index="2-1">item one</el-menu-item>
                <el-menu-item index="2-2">item two</el-menu-item>
                <el-menu-item index="2-3">item three</el-menu-item>
                <el-sub-menu index="2-4">
                    <template #title>item four</template>
                    <el-menu-item index="2-4-1">item one</el-menu-item>
                    <el-menu-item index="2-4-2">item two</el-menu-item>
                    <el-menu-item index="2-4-3">item three</el-menu-item>
                </el-sub-menu>
            </el-sub-menu> -->
        </el-menu>
        <div class="right">
            <span>退出</span>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useStore } from "vuex";
import { useRoute } from 'vue-router';
const route = useRoute();
const store = useStore();
const activeIndex = ref("");
const emit = defineEmits(["menuListChange"]);


// 截取第一个menulist,第一个有下标，特殊处理
const product = computed(() => {
    return JSON.parse(JSON.stringify(store.state.menuList)).splice(0, 1);
});
// 获取剩余menList
const menuList = computed(() => {
    return JSON.parse(JSON.stringify(store.state.menuList)).splice(
        1,
        store.state.menuList.length - 1
    );
});

const setActive = (key) => {
    activeIndex.value = key;
    const routeList = JSON.parse(JSON.stringify(store.state.menuList))
    const findData = routeList.find(i => i.href === key)
    if(findData && findData.child) emit('menuListChange', findData.child)
};

setActive(route.matched[0].name)

const handleSelect = (key, keyPath) => {
    // console.log(key, keyPath);
    setActive(key)
};
</script>

<style>
/* .el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
} */
</style>

<style lang="less" scoped>
.header {
    background: #00152a;
    height: 58px;
    display: flex;
    align-items: center;
    overflow: hidden;
    .header-logo {
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0px 20px;
    }
}
.el-menu--horizontal.el-menu  {
    border-bottom: 0;
}
.el-menu--horizontal>.el-sub-menu.is-active,.el-sub-menu__title {
    border-bottom: 0 !important;
}
.right {
    flex: 1;
    display: flex;
    height: 100%;
    font-size: 14px;
    color: white;
    align-items: center;
    flex-direction: row-reverse;
    padding-right: 10px;
}
</style>
